<template>
  <div style="border:1px solid #d9d9d9;z-index:999999">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
    <Editor style="height: 200px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
      @onCreated="handleCreated" @on-change="handleChange" />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')
const changeValue = defineEmits(["changeValue"]);

const props = defineProps(['value'])
const handleChange = () => {
  let article = valueHtml.value
  // console.log(valueHtml.value,'输入的值');
  article = article.replace(/<table /g, '<table class="codeEditorTable" ');  // 添加边框
  changeValue('changeValue', article)
  // console.log(article);
}

if (props.value) {
  console.log(props.value, '船只');
  valueHtml.value = props.value;
}

const toolbarConfig = {
  excludeKeys: ['insertImage', 'group-video', 'insertLink', 'emotion', 'codeBlock']
}
const editorConfig = {
  placeholder: '请输入内容',
  // MENU_CONF: {
  //       uploadImage: {
  //           server: productConfig.serviceUrl + '/v1/file/upload',
  //           fieldName: 'file',
  //           meta: {
  //               classify: 'standard'
  //           },
  //           maxFileSize: 20 * 1024 * 1024,
  //           customInsert(res, insertFn) {                  // JS 语法
  //               // res 即服务端的返回结果

  //               // 从 res 中找到 url alt href ，然后插入图片
  //               insertFn(productConfig.serviceUrl + productConfig.standardFileUrl + res.data.file_path)
  //           },
  //           headers: {
  //               Authorization: getToken(),
  //           },
  //       },

  //   }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
// const setValue = (value) => {
//   console.log(value, '11111111111111');
//   valueHtml.value = value;
// }

// 模拟 ajax 异步获取内容
// onMounted(() => {
//     setValue(valueHtml.value)
// })

// defineExpose({
//   setValue,
// })
</script>

<style></style>